
import { useEffect, useState } from 'react'
import { Carousel } from 'antd-mobile';
import { banner, personalized, switchTag } from './server'
import BetterScroll from '../../components/better-scroll/index'
import SearchComponent from '../../components/search/index'
import { useHistory } from 'react-router-dom'
import './index.scss'

function Home() {
  const [bannerlist, setbannerlist] = useState([])
  const [cardlist, setcardlist] = useState([])
  const history = useHistory()
  useEffect(() => {
    loadData()
  },[])
  const loadData = async()=> {
    const bannerlist = await banner({type:2})
    console.log(bannerlist)
    setbannerlist(bannerlist.banners)
    const result = await personalized({ limit: 200  })
    setcardlist(result.result)
  }
  const toDetail = (id) => {
    history.push(`/detail?id=${id}`)
  }
  const CswitchTag = () => {
    switchTag({tag: 1}).then((res) => {
      console.log(res)
    })
  }
  // const Input = useRef(null)
  // // eslint-disable-next-line react-hooks/exhaustive-deps
  // const getInput = () => {
  //   return Input.current.value
  // }
  // useEffect(() => {
  //   console.log(getInput)
  // },[getInput])
  return (
      
      <BetterScroll DownloadData={loadData}>
       {/* <SearchComponent fixed={true} /> */}
      {/* <div onClick={() => {CswitchTag()}}>1231231</div> */}
      <div className='home'>
        <Carousel
            style={{width:'100%',height:'160px',}}
            autoplay={true}
            infinite
            dots={false}
          >
            {
              bannerlist.map((item,index) => {
                return <div className="home-banner-li" key={index}><img onLoad={() => {window.dispatchEvent(new Event('resize'))}} src={item.pic} style={{ verticalAlign: 'top' }} alt="" /></div>
              })
            }
          </Carousel>
          <div className="cardlist-ul ali-c flex-wrap">
            {cardlist.map((item, index) => {
              return <div className="cardlist-li ali-c flexv" key={index} onClick={() => { toDetail(item.id) }}>
                  <div className="cardlist-li-img" style={{backgroundImage: `url(${item.picUrl})`}}></div>
                  <div className='oneline'>{item.name}</div>
              </div>
            })}
          </div>
        </div>
      </BetterScroll>
  )
}
export default Home